import iconFont from '@/assets/iconFont/iconfont.less';
import { Flex } from 'antd';
import cls from 'classnames';
import React from 'react';
import Styles from '../index.less';

type ViewMap = {
  label: string;
  value: string;
  icon: React.ReactNode;
  unit: string;
};

interface Iprops {
  stationInfo: stationParamsInterface;
}

interface stationParamsInterface {
  stationType: string | undefined;
  startTime: string | undefined;
  startStatus: string | undefined;
  startDays: string | undefined;
  SOC: string | number | undefined;
  realtimePower: string | undefined;
  chargeVal: string | undefined;
  dischargeVal: string | undefined;
}

const StationView: React.FC<Iprops> = (props) => {
  const { stationInfo } = props as any;
  const viewMaps: ViewMap[] = [
    {
      label: '电站类型',
      value: 'stationType',
      icon: <span className={cls([iconFont.iconfont, Styles.viewIcon])}>&#xe876;</span>,
      unit: '',
    },
    {
      label: '投运时间',
      value: 'startTime',
      icon: <span className={cls([iconFont.iconfont, Styles.viewIcon])}>&#xe871;</span>,
      unit: '',
    },
    {
      label: '运行状态',
      value: 'startStatus',
      icon: <span className={cls([iconFont.iconfont, Styles.viewIcon])}>&#xe873;</span>,
      unit: '',
    },
    {
      label: '总运行时间(天)',
      value: 'startDays',
      icon: <span className={cls([iconFont.iconfont, Styles.viewIcon])}>&#xe874;</span>,
      unit: '',
    },
    {
      label: 'SOC(%)',
      value: 'SOC',
      icon: <span className={cls([iconFont.iconfont, Styles.viewIcon])}>&#xe870;</span>,
      unit: '',
    },
    {
      label: '实时总功率(kW)',
      value: 'realtimePower',
      icon: <span className={cls([iconFont.iconfont, Styles.viewIcon])}>&#xe872;</span>,
      unit: '',
    },
    {
      label: '可充电量(kWh)',
      value: 'chargeVal',
      icon: <span className={cls([iconFont.iconfont, Styles.viewIcon])}>&#xe877;</span>,
      unit: '',
    },
    {
      label: '可放电量(kWh)',
      value: 'dischargeVal',
      icon: <span className={cls([iconFont.iconfont, Styles.viewIcon])}>&#xe875;</span>,
      unit: '',
    },
  ];
  return (
    <div style={{ width: '100%' }}>
      <Flex wrap={'wrap'}>
        {viewMaps.map((item, index) => {
          return (
            <div key={item.value} style={{ marginTop: index <= 1 ? 5 : 22, width: '50%' }}>
              <Flex>
                {item.icon}
                <div style={{ marginLeft: 9, width: '80%' }}>
                  <Flex
                    align={'center'}
                    style={{ color: '#222222', fontSize: '14px', fontWeight: 400 }}
                  >
                    <div style={{ width: item.value === 'SOC' ? 60 : 'auto' }}>{item.label}</div>
                    {item.value === 'SOC' && (
                      <Flex
                        justify={'space-between'}
                        style={{ color: '#222222', fontSize: '14px', fontWeight: 400, width: 70 }}
                      >
                        <div>上限{stationInfo.maxSoc}</div>
                        <span
                          style={{ color: '#FC5F5B', fontSize: '14px', fontWeight: 400 }}
                          className={cls([iconFont.iconfont])}
                        >
                          &#xe878;
                        </span>
                      </Flex>
                    )}
                  </Flex>
                  <Flex
                    align={'center'}
                    style={{
                      color: '#222222',
                      fontSize: '16px',
                      fontWeight: 'bold',
                      marginTop: 3,
                    }}
                  >
                    <div style={{ width: item.value === 'SOC' ? 60 : 'auto' }}>
                      {stationInfo[item.value]}
                      {item.unit && <span style={{ fontSize: 14 }}>{item.unit}</span>}
                    </div>
                    {item.value === 'SOC' && (
                      <Flex
                        justify={'space-between'}
                        style={{ color: '#222222', fontSize: '14px', fontWeight: 400, width: 70 }}
                      >
                        <div>下限{stationInfo.minSoc}</div>
                        <span
                          style={{ color: '#196CFE', fontSize: '14px', fontWeight: 400 }}
                          className={cls([iconFont.iconfont])}
                        >
                          &#xe879;
                        </span>{' '}
                      </Flex>
                    )}
                  </Flex>
                </div>
              </Flex>
            </div>
          );
        })}
      </Flex>
    </div>
  );
};

export default StationView;
